import React from 'react'
import { Form, Input, Button,message} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {connect} from 'react-redux'

import './login.less'
import {reqLogin} from '../../api/index'
import memoryUtils from '../../utils/memoryUtils'
import {login} from '../../redux/actions'


class Login extends React.Component{

    render(){
        const onFinish = async(values) => {
            console.log('Received values of form: ', values);
            const username = values.username
            const password = values.password
            this.props.login(username,password)
            console.log(this.props.user)
            //  const result = await reqLogin(values.username,values.password)
            //  console.log(result)
            //  if(result.status===0){
            //     message.success('登录成功')
            //      // 保存用户登录信息
            //     memoryUtils.user = result.data
            //     this.props.history.replace('/')
            //  }else{
            //      message.error(result.msg)
            //  }
          };
        return (
            <div className='login-page'>
                <div className='login-page-panl'>
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        >
                        <Form.Item
                            name="username"
                            rules={[
                            {
                                required: true,
                                message: '用户名不能为空!',
                            },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                            {
                                required: true,
                                // len:5,
                                // pattern:/^\d{3}$/,//3位数字
                                message: '请输入正确格式密码!',//密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)^[a-zA-Z]\w{5,17}$
                            },
                            ]}
                        >
                            <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="密码"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                            </Button>
                        </Form.Item>
                        </Form>
                </div>
                
            </div>
        )
    }
}

export default connect(
    state => ({user: state.user}),
    {login}
  )(Login)